<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise方法</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="module">
        //then()方法
        var promise = new Promise(function (resolve, reject) {
            var request = new XMLHttpRequest();
            var url = "data.json";
            request.open("GET", url);
            request.addEventListener("load", function () {
                if (request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject("Server Error: " + request.status);
                }
            }, false);
            request.addEventListener("error", function () {
                reject("Cannot Make AJAX Request");
            }, false);
            request.send();
        });
        promise.then(function (value) {
            value = JSON.parse(value);
            return value;
        }, function (reason) {
            console.log(reason);
        });
        //将检索到的数据记录到控制台
        function ajax() {
            return new Promise(function (resolve, reject) {
                var request = new XMLHttpRequest();
                var url = "data.json";
                request.open("GET", url);
                request.addEventListener("load", function () {
                    if (request.status === 200) {
                        resolve(request.responseText);
                    } else {
                        reject("Server Error: " + request.status);
                    }
                }, false);
                request.addEventListener("error", function () {
                    reject("Cannot Make AJAX Request");
                }, false);
                request.send();
            });
        }
        ajax().then(function (value) {
            value = JSON.parse(value);
            return value;
        }).then(function (value) {
            console.log(value.Name);
            return value;
        }).then(function (value) {
            console.log(value.Profession);
            return value;
        }).then(function (value) {
            console.log(value.Age);
            return value;
        }).then(null, function (reason) {
            console.log(reason);
        });
        //向then链中添加异步操作
        function verify(value) {
            return new Promise(function (resolve, reject) {
                if (value == true) {
                    //操作
                } else {
                    //操作
                }
            });
        }
        ajax().then(function (value) {
            value = JSON.parse(value);
            return value;
        }).then(function (value) {
            console.log(value.Name);
            return value;
        }).then(function (value) {
            console.log(value.Profession);
            return value;
        }).then(function (value) {
            console.log(value.Age);
            return value;
        }).then(function (value) {
            var result = confirm("Is the data correct?");
            return result;
        }).then(verify).then(null, function (reason) {
            console.log(reason);
        });

        //最后一个链接的then()方法用catch()方法
        ajax().then(function (value) {
            value = JSON.parse(value);
            return value;
        }).then(function (value) {
            console.log(value.Name);
            return value;
        }).then(function (value) {
            console.log(value.Profession);
            return value;
        }).then(function (value) {
            console.log(value.Age);
            return value;
        }).then(function (value) {
            var result = confirm("Is the data correct?");
            return result;
        }).then(verify)
            .catch(function (reason) {
                console.log(reason);
            });

        //resolve()方法
        var p1 = Promise.resolve(4);
        p1.then(function (value) {
            console.log(value); // 4
        });
        Promise.resolve(p1).then(function (value) {
            console.log(value);  // 4
        });
        Promise.resolve({name: "Eden"}).then(function (value) {
            console.log(value.name); //Eden
        });

        //reject()方法：获取一个值，并以传递的值作为原因返回一个被拒绝的promise对象。
        var p1 = Promise.reject(4);
        p1.then(null, function (value) {
            console.log(value);  // 4
        });
        Promise.reject({name: "Eden"}).then(null, function (value) {
            console.log(value.name); // Eden
        });

        //all()方法：将一个可迭代的对象作为参数，并返回一个Promise
        var p1 = new Promise(function(resolve, reject){
            setTimeout(function(){
                resolve("1");
            }, 1000);
        });
        var p2 = new Promise(function(resolve, reject){
            setTimeout(function(){
                resolve("2");
            }, 2000);
        });
        var arr = [p1, p2];
        var  t1 = +new Date();
        Promise.all(arr).then(function(reason){
            //为什么是2秒，因为p1跟p2同步执行
            console.log(reason); //2秒后执行 1, 2
            var  t2 = +new Date();
            console.log(t2 - t1);
        });

        var p1 = new Promise(function(resolve, reject){
            setTimeout(function(){
                //当Promise被拒绝（只能有一种状态），立即返回一个拒绝的Promise
                reject("Error");
            }, 1000);
        });
        var p2 = new Promise(function(resolve, reject){
            setTimeout(function(){
                resolve("2");
            }, 2000);
        });
        var arr = [p1, p2];
        Promise.all(arr).then(null, function(reason){
            console.log(reason); //1秒后执行
        });

        //race方法：使用一个可迭代的对象作为参数，并返回一个Promise
        var p1 = new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve("Fulfillment Value 1");
            }, 1000);
        });
        var p2 = new Promise(function (resolve, reject) {
            setTimeout(function () {

                resolve("fulfillment Value 2");
            }, 2000);
        });
        var arr = [p1, p2];
        Promise.race(arr).then(function (value) {
            console.log(value); //"Fulfillment value 1"
        }, function (reason) {
            console.log(reason);
        });

    </script>
</head>
<body>

</body>
</html>